<template>
  <div class="width100">
    <div
      class="pointer flex acenter jcenter avatarBox"
      @click="handleFileChoose"
      @mouseenter="active = true"
      @mouseleave="active = false"
    >
      <el-avatar
        :size="134"
        :src="
          FormData.Avatar
            ? proxy.$addFileHead(FormData.Avatar)
            : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        "
      />
      <div class="avatarText" v-show="active">
        <span class="">修改头像</span>
      </div>
    </div>
    <div class="InputInfo">
      <el-form
        :model="FormData"
        label-position="top"
        :rules="rules"
        inline
        ref="userRef"
        class="w100"
      >
        <el-tabs style="width: 100%" :stretch="true">
          <el-tab-pane label="个人资料">
            <div class="content">
              <el-form-item label="姓名" prop="Name">
                <el-input
                  v-model="FormData.Name"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="出生日期" prop="Birthday">
                <MyDateTime
                  v-model="FormData.Birthday"
                  format="YYYY-MM-DD"
                  style="width: 100%"
                  type="date"
                ></MyDateTime>
              </el-form-item>
            </div>
            <div class="width100">
              <el-form-item label="身份证" prop="IDCard">
                <el-input
                  v-model="FormData.IDCard"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </div>
            <div class="content">
              <el-form-item label="籍贯" prop="Ancestral">
                <MyCascader
                  v-model="FormData.Ancestral"
                  style="width: 100%"
                  :props="{
                    label: 'cityName',
                    value: 'cityName',
                    children: 'city'
                  }"
                  Category="籍贯"
                />
              </el-form-item>
              <el-form-item label="民族" prop="Nation">
                <Selector
                  category="民族"
                  v-model="FormData.Nation"
                  style="width: 100%"
                ></Selector>
              </el-form-item>
              <el-form-item label="性别" prop="Sex">
                <el-select
                  v-model="FormData.Sex"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学历" prop="Education">
                <el-input
                  v-model="FormData.Education"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="Phone">
                <el-input
                  v-model="FormData.Phone"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="电子邮箱" prop="Email">
                <el-input
                  v-model="FormData.Email"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </div>
            <div class="width100">
              <el-form-item label="其他备注" prop="Remark">
                <el-input
                  type="textarea"
                  v-model="FormData.Remark"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="在校资料">
            <div class="content">
              <el-form-item
                label="用户类型"
                prop="Type"
                v-if="FormData.userManage"
              >
                <el-select
                  v-model="FormData.Type"
                  clearable
                  placeholder="请选择"
                >
                  <el-option label="学生" :value="1" />
                  <el-option label="职员" :value="2" />
                  <el-option label="管理员" :value="3" />
                </el-select>
              </el-form-item>
              <el-form-item
                label="所属班级"
                prop="ID_Class"
                v-if="FormData.Type == 1"
              >
                <Selector
                  category="班级级联"
                  cascader="级联"
                  v-model="FormData.ID_Class"
                  v-model:placeholder="FormData.Name_Class"
                  style="width: 100%"
                ></Selector>
              </el-form-item>
              <el-form-item
                label="所属部门"
                prop="ID_Dept"
                v-if="FormData.Type == 2 || FormData.Type == 3"
              >
                <Selector
                  category="部门级联"
                  cascader="级联"
                  v-model="FormData.ID_Dept"
                  v-model:placeholder="FormData.Name_Dept"
                  style="width: 100%"
                ></Selector>
              </el-form-item>
              <el-form-item
                :label="FormData.Type == 1 ? '入学日期' : '入职日期'"
                prop="AccessionDate"
              >
                <MyDateTime
                  v-model="FormData.AccessionDate"
                  format="YYYY-MM-DD"
                  style="width: 100%"
                  type="date"
                ></MyDateTime>
              </el-form-item>
              <el-form-item label="在校情况" prop="SchoolState">
                <div class="tbg width100 flex jcenter acenter">
                  <el-radio-group v-model="FormData.SchoolState">
                    <el-radio :label="1">{{
                      FormData.Type == 1 ? '在读' : '在职'
                    }}</el-radio>
                    <el-radio :label="2">{{
                      FormData.Type == 2 || FormData.Type == 3 ? '离校' : '离职'
                    }}</el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="系统资料">
            <div class="content">
              <el-form-item label="登录账号" prop="Account">
                <el-input
                  v-model="FormData.Account"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="PWD" v-if="!FormData.ID">
                <el-input
                  v-model="FormData.PWD"
                  placeholder="请输入"
                  type="password"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item label="账号角色" prop="RoleIDs">
                <Selector
                  category="角色"
                  v-model="FormData.RoleIDs"
                  type="array"
                  style="width: 100%"
                ></Selector>
              </el-form-item>

              <el-form-item label="是否启用" prop="Enable">
                <div class="tbg width100 flex jcenter acenter">
                  <el-radio-group v-model="FormData.Enable">
                    <el-radio label="Y">启用</el-radio>
                    <el-radio label="N">停用</el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
    <input type="file" ref="upload" v-show="false" accept=".jpg,.jpeg,.png" />
  </div>
</template>

<script setup name="AddUserCom">
import { uploadApi } from '@/api/upload/index';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['update:FormData', 'update:userRef']);
const props = defineProps({
  FormData: {
    default: {}
  }
});

const upload = ref();
const active = ref(true);
const circleUrl = ref(
  'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
);
const rules = ref({
  PassWord: [
    {
      required: true,
      pattern: /(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{6,}/,
      message: '大小写英文、数字、符号。并且长度不可低于6位数',
      trigger: 'blur'
    }
  ],
  Name: [
    { required: true, message: '用户名称不能为空', trigger: 'blur' },
    {
      min: 2,
      max: 20,
      message: '用户名称长度必须介于 2 和 20 之间',
      trigger: 'blur'
    }
  ],
  Account: [{ required: true, message: '登录账户不能为空', trigger: 'blur' }],
  PWD: [
    { required: true, message: '登录密码不能为空', trigger: 'blur' },
    {
      min: 6,
      max: 20,
      message: '用户密码长度必须介于 6 和 20 之间',
      trigger: 'blur'
    }
  ],
  Enable: [
    {
      required: true,
      message: '请选择用户类型',
      trigger: 'change'
    }
  ],
  Phone: [
    {
      required: true,
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur',
      max: 11
    }
  ],
  Type: [
    {
      required: true,
      message: '请选择用户类型',
      trigger: 'change'
    }
  ],
  RoleIDs: [
    {
      required: true,
      message: '请选择角色',
      trigger: 'change'
    }
  ],
  ID_Class: [
    {
      required: true,
      message: '请选择班级',
      trigger: 'change'
    }
  ],
  ID_Dept: [
    {
      required: true,
      message: '请选择部门',
      trigger: 'change'
    }
  ],
  SchoolState: [
    {
      required: true,
      message: '请选择',
      trigger: 'change'
    }
  ]
});
const userRef = ref({});
const FormData = computed({
  get: () => props.FormData,
  set: val => {
    emit('update:FormData', val);
  }
});
onMounted(() => {
  upload.value.addEventListener('change', e => {
    let fileList = Array.from(e.target.files);
    fileList?.every(async item => {
      let res = await uploadApi(item);
      FormData.value.Avatar = res.data.Path;
    });
  });
  console.log(FormData.value);
});
function handleFileChoose() {
  upload.value.click();
}

defineExpose({
  userRef
});
</script>

<style lang="scss" scoped>
.avatarBox {
  position: relative;
  width: 134px;
  height: 134px;
  margin: auto;
  .avatarText {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    left: 0;
    top: 0;
    width: 134px;
    height: 134px;
    line-height: 134px;
    text-align: center;
    border-radius: 50%;
    color: white;
  }
}
.InputInfo {
  padding: 20px 0 20px 0;
  margin: 0 20px;
  :deep(.el-form) {
    .el-form-item {
      margin-bottom: 14px;
      .el-form-item__label {
        color: #3c3c3c;
        font-size: 16px;
      }
    }
  }
  .content {
    width: 100%;
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    .item {
      .name {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 4px;
      }
    }
  }
  .submit {
    display: flex;
    justify-content: flex-end;
  }
}
.drbar {
  height: 40px;
  line-height: 40px;
}
:deep(.InputInfo) {
  border: none !important;
  --el-select-border-color-hover: #fff;
  .el-select {
    --el-select-border-color-hover: #fff;
  }

  //   .select-trigger {
  border: none !important;
  .el-input,
  .el-textarea {
    --el-input-focus-border: #fff;
    --el-input-transparent-border: 0 0 0 0px;
    --el-input-border-color: #fff;
    --el-input-hover-border: 0px !important;
    --el-input-hover-border-color: #fff;
    --el-input-focus-border-color: #fff;
    // --el-input-clear-hover-color: #fff;
    box-shadow: 0 0 0 0px !important;
    --el-input-border: 0px;
    .el-input__inner,
    .el-textarea__inner {
      border: none !important;
      outline: none !important;
      color: #979797;
      background-color: rgba(0, 0, 0, 0.04);
      height: 32px;
      line-height: 32px;
      //   padding: 0 10px;
      border-radius: 10px;
      font-size: 14px;
    }
  }
  //   }
  .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 0px !important;
  }
  .el-input.is-focus .el-input__inner {
    box-shadow: 0 0 0 0px !important;
  }
  .el-input__inner:focus {
    box-shadow: 0 0 0 0px !important;
  }
  .el-input.is-focus .el-input__wrapper {
    box-shadow: 0 0 0 0px !important;
  }
}
</style>
